<%@ page language="java" contentType="text/html; charset=iso-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">


<head><title>How to create tree view in JavaScript </title> 

</head><body bgcolor="#000000">

<div id="myMenu">
<div id="node_title_1"><a href="javascript:void(0);" onClick="javascript:hide_menu('1',1);" class="link_text">

<span class="node_title" id="node_1_title" style="color:#FFF; font-size:14px; font-family:Verdana, Geneva, sans-serif" onMouseOver="expand(this)" onMouseOut="contrast(this)">&#9660;</span></a><a href="New_Front.jsp" target="three" class="node_title" style="color:#FFF; font-size:16px; font-family:Verdana, Geneva, sans-serif" onMouseOver="expand(this)" onMouseOut="contrast(this)">Chassis </a>

<!--
<div id="node_1">



<div id="node_title_1"><a href="javascript:void(0);" onClick="javascript:hide_menu('2',1);" class="link_text">

<div id="node_1_link_1" class="node_content">&#9660;<a href="FanModule.jsp" target="three" class="link_text" style="color:#000; font-size:14px; font-family:'Arial Black', Gadget, sans-serif">Fan Module </a></div>



</div>

<div id="node_1_link_1"><a href="javascript:void(0);" onClick="javascript:hide_menu('3',1);" class="link_text"> <span class="node_title" id="node_3_title" style="color:#000; font-size:16px; font-family:'Arial Black', Gadget, sans-serif">&#9660;</span></a><span class="node_title" style="color:#000; font-size:16px; font-family:'Arial Black', Gadget, sans-serif">Root 3 </span>

<div id="node_3">

<div id="node_3_link_1" class="node_content">&bull;&nbsp;<a href="HTML1.html" target="four" class="link_text" style="color:#000; font-size:12px; font-family:'Arial Black', Gadget, sans-serif">Sub 7 </a></div>

<div id="node_3_link_2" class="node_content">&bull;&nbsp;<a href="HTML1.html" target="four"  class="link_text" style="color:#000; font-size:12px; font-family:'Arial Black', Gadget, sans-serif">Sub 8 </a></div>

<div id="node_3_link_3" class="node_content">&bull;&nbsp;<a href="HTML1.html" target="four" class="link_text" style="color:#000; font-size:12px; font-family:'Arial Black', Gadget, sans-serif">Sub 9 </a></div>


</div><input type="hidden" id="node_3_status" name="node_3_status" value="1" />

</div>
-->


<div id="node_1">

<div id="node_1_link_1" class="node_content" style="color:#FFF"><p/>&bull;&nbsp;<a href="FanModule.jsp" target="three" class="link_text" style="color:#FFF; font-size:14px; font-family:Verdana, Geneva, sans-serif" onMouseOver="expand(this)" onMouseOut="contrast(this)">Fan Module </a></div>

<div id="node_1_link_2" class="node_content" style="color:#FFF"><p/>&bull;&nbsp;<a href="BladeServer.jsp" target="three" class="link_text" style="color:#FFF; font-size:14px; font-family:Verdana, Geneva, sans-serif" onMouseOver="expand(this)" onMouseOut="contrast(this)">Blade Server </a></div>

<div id="node_1_link_3" class="node_content" style="color:#FFF"><p/>&bull;&nbsp;<a href="PSU.jsp" target="three" class="link_text" style="color:#FFF; font-size:14px; font-family:Verdana, Geneva, sans-serif" onMouseOver="expand(this)" onMouseOut="contrast(this)">PSU </a></div>

</div><input type="hidden" id="node_1_status" name="node_1_status" value="1" />

</div>

<div id="node_title_2"><a href="javascript:void(0);" onClick="javascript:hide_menu('2',1);" class="link_text"> <span class="node_title" id="node_2_title" style="color:#000; font-size:16px; font-family:'Arial Black', Gadget, sans-serif"><!-- &#9660; --></span></a><a href="FabricIC.jsp" target="three" class="node_title" style="color:#FFF; font-size:15px; font-family:Verdana, Geneva, sans-serif" onMouseOver="expand(this)" onMouseOut="contrast(this)"><p/>&nbsp;&nbsp;&nbsp;Fabric IC </a>

<div id="node_2">

<!--
<div id="node_2_link_1" class="node_content">&bull;&nbsp;<a href="HTML1.html" target="four" class="link_text" style="color:#000; font-size:12px; font-family:'Arial Black', Gadget, sans-serif">Sub 4 </a></div>

<div id="node_2_link_2" class="node_content">&bull;&nbsp;<a href="HTML1.html" target="four" class="link_text" style="color:#000; font-size:12px; font-family:'Arial Black', Gadget, sans-serif">Sub 5 </a></div>

<div id="node_2_link_3" class="node_content">&bull;&nbsp;<a href="HTML1.html" target="four" class="link_text" style="color:#000; font-size:12px; font-family:'Arial Black', Gadget, sans-serif">Sub 6 </a></div>

-->

</div>
</div>

<div id="node_title_3">
<a href="ServiceProfile.jsp" target="three" class="node_title" style="color:#FFF; font-size:15px; font-family:Verdana, Geneva, sans-serif" onMouseOver="expand(this)" onMouseOut="contrast(this)"><p/>&nbsp;&nbsp;&nbsp;Service Profiles </a>

<!--

  <div id="node_3">

<div id="node_3_link_1" class="node_content">&bull;&nbsp;<a href="HTML1.html" target="four" class="link_text" style="color:#000; font-size:12px; font-family:'Arial Black', Gadget, sans-serif">Sub 7 </a></div>

<div id="node_3_link_2" class="node_content">&bull;&nbsp;<a href="HTML1.html" target="four"  class="link_text" style="color:#000; font-size:12px; font-family:'Arial Black', Gadget, sans-serif">Sub 8 </a></div>

<div id="node_3_link_3" class="node_content">&bull;&nbsp;<a href="HTML1.html" target="four" class="link_text" style="color:#000; font-size:12px; font-family:'Arial Black', Gadget, sans-serif">Sub 9 </a></div>

</div><input type="hidden" id="node_3_status" name="node_3_status" value="1" />

</div></div> 

-->

</body> 

</html>


<script type="text/javascript" language="javascript">

//for MouseOver and MouseOut events on a label.

function expand(x)
{
	//alert("Expanded");
	
	x.style.color="#139554";
	
}
function contrast(x)
{
	//alert("contrast");
	x.style.color="#FFF";
}

//for MouseOver and MouseOut events on a label.


function hide_menu(node_id,menu_type){

var node_prefix="";

switch(menu_type){

case 1:{

node_prefix="node_";

}break;

case 2:{

node_prefix="main_node_";

}break;

}



var node=document.getElementById(node_prefix+node_id);

var node_status=document.getElementById(node_prefix+node_id+"_status");

var node_text=document.getElementById(node_prefix+node_id+"_title");
if(node_status.value=="1"){

node.style.display = "none"; 

}else{

node.style.display = ""; 

}

if(node_status.value=="1"){

node_status.value="0";

node_text.innerHTML="&#9658";

}else{

node_status.value="1";

node_text.innerHTML="&#9660";

}

return false;

}
-->

</script>
<style type="text/css">

.node_content{

padding-left:30px; 

}

.node_title{

vertical-align:top;

}

.link_text{

font-family:Verdana, Arial, Helvetica, sans-serif;

font-size:10px;

text-decoration:none;

}

.link_text:hover{

text-shadow:#FFCC00;

font-weight:bold;

}

.node_title{

font-family:Verdana, Arial, Helvetica, sans-serif;

font-size:11px;

font-weight:bold;

text-decoration:none;

}

</style>
